import React, { useState, useEffect } from 'react'
import { Card, Row, Col, List, Avatar, Tag, Button, Badge, Modal, message, Statistic, Input, Rate, Progress } from 'antd'
import { useNavigate } from 'react-router-dom'
import { 
  HomeOutlined, 
  BookOutlined, 
  MessageOutlined, 
  ShoppingCartOutlined, 
  CalendarOutlined,
  FileTextOutlined,
  BellOutlined,
  UserOutlined,
  EyeOutlined,
  PlayCircleOutlined, 
  EnvironmentOutlined, 
  PieChartOutlined, 
  HeartOutlined, 
  TrophyOutlined, 
  CheckCircleOutlined, 
  ExclamationCircleOutlined, 
  LikeOutlined, 
  ShareAltOutlined, 
  DownloadOutlined,
  PhoneOutlined 
} from '@ant-design/icons'
import { mockApi } from '@/services/mockData'

const { Countdown } = Statistic;
const { Search } = Input;

const UserDashboard: React.FC = () => {
  const [userInfo, setUserInfo] = useState<any>(null)
  const [notifications, setNotifications] = useState<any[]>([])
  const [latestContent, setLatestContent] = useState<any[]>([])
  const [upcomingEvents, setUpcomingEvents] = useState<any[]>([])
  const [loading, setLoading] = useState(true)
  const [userStats] = useState({
    contentViewed: 45,
    eventsAttended: 8,
    trainingCompleted: 12,
    points: 1560
  })
  const [quickServices] = useState([
    { name: '政策查询', icon: <FileTextOutlined />, description: '查询最新农业政策', completed: true },
    { name: '技术培训', icon: <BookOutlined />, description: '参加技术培训课程', completed: false },
    { name: '市场行情', icon: <ShoppingCartOutlined />, description: '查看农产品价格', completed: true },
    { name: '社群交流', icon: <MessageOutlined />, description: '加入乡村交流群', completed: false },
    { name: '活动报名', icon: <CalendarOutlined />, description: '报名参加活动', completed: true },
    { name: '个人中心', icon: <UserOutlined />, description: '管理个人信息', completed: true },
    { name: '乡村媒体', icon: <PlayCircleOutlined />, description: '浏览乡村媒体内容', completed: false },
    { name: '乡村服务', icon: <HeartOutlined />, description: '使用乡村服务功能', completed: false },
    { name: '数字治理', icon: <PieChartOutlined />, description: '参与数字治理平台', completed: false },
    { name: '乡村建设', icon: <EnvironmentOutlined />, description: '了解乡村建设进展', completed: false }
  ])
  const navigate = useNavigate()

  useEffect(() => {
    // 检查用户登录状态
    const storedUserInfo = localStorage.getItem('userInfo') || sessionStorage.getItem('userInfo')
    if (!storedUserInfo) {
      navigate('/login')
      return
    }
    
    const parsedUserInfo = JSON.parse(storedUserInfo)
    setUserInfo(parsedUserInfo)
    
    fetchData()
  }, [navigate])

  const fetchData = async () => {
    setLoading(true)
    try {
      // 获取最新内容
      const contentData = await mockApi.getContentList()
      setLatestContent(contentData.slice(0, 3))
      
      // 模拟通知数据
      const notificationData = [
        {
          id: '1',
          title: '新政策通知',
          content: '关于2024年农业补贴政策的最新通知',
          time: '2024-03-16 10:30',
          isRead: false,
          type: 'policy'
        },
        {
          id: '2',
          title: '技术培训',
          content: '水稻种植技术线上培训即将开始',
          time: '2024-03-15 14:20',
          isRead: false,
          type: 'training'
        },
        {
          id: '3',
          title: '市场行情',
          content: '本周农产品市场价格分析报告已发布',
          time: '2024-03-14 09:15',
          isRead: true,
          type: 'market'
        },
        {
          id: '4',
          title: '活动提醒',
          content: '春季农业技术推广会即将开始',
          time: '2024-03-13 16:45',
          isRead: false,
          type: 'event'
        }
      ]
      setNotifications(notificationData)
      
      // 模拟即将到来的活动
      const eventsData = [
        {
          id: '1',
          title: '春季农业技术推广会',
          date: '2024-03-20',
          time: '09:00-17:00',
          location: '幸福村村委会',
          type: 'training',
          participants: 45,
          maxParticipants: 100,
          status: 'open'
        },
        {
          id: '2',
          title: '农产品电商培训',
          date: '2024-03-25',
          time: '14:00-16:00',
          location: '乡文化中心',
          type: 'training',
          participants: 23,
          maxParticipants: 50,
          status: 'open'
        },
        {
          id: '3',
          title: '乡村旅游节',
          date: '2024-04-01',
          time: '全天',
          location: '县文化广场',
          type: 'festival',
          participants: 120,
          maxParticipants: 500,
          status: 'open'
        }
      ]
      setUpcomingEvents(eventsData)
    } catch (error) {
      console.error('获取数据失败:', error)
    } finally {
      setLoading(false)
    }
  }

  const handleLogout = () => {
    // 清除登录状态
    localStorage.removeItem('userInfo')
    sessionStorage.removeItem('userInfo')
    navigate('/login')
  }

  // 查看通知详情
  const handleViewNotification = (notification: typeof notifications[0]) => {
    if (!notification.isRead) {
      // 更新通知状态为已读
      setNotifications(notifications.map(item => 
        item.id === notification.id ? { ...item, isRead: true } : item
      ))
    }
    Modal.info({
      title: notification.title,
      content: (
        <div>
          <p>{notification.content}</p>
          <div style={{ marginTop: '12px', padding: '12px', background: '#f5f5f5', borderRadius: '6px' }}>
            <p style={{ margin: 0, color: '#666' }}>通知类型: {notification.type === 'policy' ? '政策通知' : notification.type === 'training' ? '技术培训' : notification.type === 'market' ? '市场行情' : '活动提醒'}</p>
            <p style={{ margin: '4px 0 0 0', color: '#999' }}>通知时间: {notification.time}</p>
          </div>
        </div>
      ),
      width: 600
    })
  }

  // 查看活动详情
  const handleViewEvent = (event: typeof upcomingEvents[0]) => {
    Modal.info({
      title: event.title,
      content: (
        <div>
          <div style={{ display: 'flex', gap: '24px', marginBottom: '16px' }}>
            <div>
              <p style={{ margin: 0, fontWeight: 'bold' }}>活动时间</p>
              <p style={{ margin: '4px 0 0 0', color: '#666' }}>{event.date} {event.time}</p>
            </div>
            <div>
              <p style={{ margin: 0, fontWeight: 'bold' }}>活动地点</p>
              <p style={{ margin: '4px 0 0 0', color: '#666' }}>{event.location}</p>
            </div>
          </div>
          
          <div style={{ marginBottom: '16px' }}>
            <p style={{ margin: 0, fontWeight: 'bold' }}>参与情况</p>
            <Progress 
              percent={Math.round((event.participants / event.maxParticipants) * 100)} 
              status={event.status === 'open' ? 'active' : 'exception'}
              style={{ margin: '8px 0' }}
            />
            <p style={{ margin: 0, color: '#666' }}>{event.participants} / {event.maxParticipants} 人已报名</p>
          </div>
          
          <p style={{ margin: 0 }}>活动描述: 这是一项为乡村发展举办的重要活动，欢迎广大农民朋友积极参加！</p>
        </div>
      ),
      width: 600
    })
  }

  // 参加活动
  const handleJoinEvent = (event: typeof upcomingEvents[0]) => {
    if (event.participants >= event.maxParticipants) {
      message.warning('该活动报名人数已满')
      return
    }
    
    Modal.confirm({
      title: '确认报名',
      content: `您确定要报名参加"${event.title}"活动吗？`,
      onOk: () => {
        setUpcomingEvents(events => 
          events.map(e => 
            e.id === event.id ? { ...e, participants: e.participants + 1 } : e
          )
        )
        message.success(`已成功报名参加${event.title}`)
      }
    })
  }

  // 快捷服务点击处理
  const handleServiceClick = (serviceName: string) => {
    const service = quickServices.find(s => s.name === serviceName)
    if (service) {
      if (service.completed) {
        Modal.info({
          title: serviceName,
          content: (
            <div>
              <p>{service.description}</p>
              <div style={{ padding: '12px', background: '#f0f9ff', borderRadius: '6px', marginTop: '12px' }}>
                <CheckCircleOutlined style={{ color: '#52c41a', marginRight: '8px' }} />
                <span>您已完成此服务</span>
              </div>
            </div>
          )
        })
      } else {
        // 根据服务名称跳转到对应页面
        switch (serviceName) {
          case '政策查询':
            message.info('政策查询功能正在开发中，敬请期待！')
            break
          case '技术培训':
            navigate('/training-center')
            break
          case '市场行情':
            message.info('市场行情功能正在开发中，敬请期待！')
            break
          case '社群交流':
            navigate('/tech-exchange')
            break
          case '活动报名':
            message.info('活动报名功能正在开发中，敬请期待！')
            break
          case '个人中心':
            message.info('个人中心功能正在开发中，敬请期待！')
            break
          case '乡村媒体':
            navigate('/media-integration')
            break
          case '乡村服务':
            navigate('/rural-service')
            break
          case '数字治理':
            navigate('/digital-governance')
            break
          case '乡村建设':
            navigate('/digital-rural-construction')
            break
          default:
            Modal.info({
              title: serviceName,
              content: (
                <div>
                  <p>{service.description}</p>
                  <div style={{ padding: '12px', background: '#fff7e6', borderRadius: '6px', marginTop: '12px' }}>
                    <ExclamationCircleOutlined style={{ color: '#fa8c16', marginRight: '8px' }} />
                    <span>此服务尚未完成，点击开始使用</span>
                  </div>
                </div>
              )
            })
        }
      }
    }
  }

  // 全部标为已读
  const handleMarkAllAsRead = () => {
    setNotifications(notifications.map(item => ({ ...item, isRead: true })))
    message.success('已全部标为已读')
  }

  // 完善个人资料
  const handleCompleteProfile = () => {
    Modal.confirm({
      title: '完善个人资料',
      content: (
        <div>
          <p>请完善您的个人信息，以便我们为您提供更好的服务</p>
          <div style={{ marginTop: '16px' }}>
            <div style={{ marginBottom: '16px' }}>
              <label style={{ display: 'block', marginBottom: '4px', fontWeight: 'bold' }}>真实姓名</label>
              <Input placeholder="请输入您的真实姓名" />
            </div>
            <div style={{ marginBottom: '16px' }}>
              <label style={{ display: 'block', marginBottom: '4px', fontWeight: 'bold' }}>联系电话</label>
              <Input placeholder="请输入您的联系电话" />
            </div>
            <div style={{ marginBottom: '16px' }}>
              <label style={{ display: 'block', marginBottom: '4px', fontWeight: 'bold' }}>所在村庄</label>
              <Input placeholder="请输入您所在的村庄" />
            </div>
            <div style={{ marginBottom: '16px' }}>
              <label style={{ display: 'block', marginBottom: '4px', fontWeight: 'bold' }}>种植类型</label>
              <Input placeholder="请输入您的主要种植类型" />
            </div>
          </div>
        </div>
      ),
      onOk: () => {
        message.success('个人资料已更新')
      },
      width: 500
    })
  }

  // 查看内容详情
  const handleViewContent = (content: any) => {
    Modal.info({
      title: content.title,
      content: (
        <div>
          <div style={{ display: 'flex', gap: '16px', marginBottom: '16px' }}>
            <Tag color={
              content.type === 'article' ? 'blue' :
              content.type === 'video' ? 'red' :
              content.type === 'audio' ? 'orange' : 'green'
            }>
              {content.type === 'article' ? '文章' :
               content.type === 'video' ? '视频' :
               content.type === 'audio' ? '音频' : '图片'}
            </Tag>
            <span>作者：{content.author}</span>
            <span>发布时间：{content.createTime}</span>
          </div>
          
          <div style={{ background: '#f5f5f5', padding: '16px', borderRadius: '6px', marginBottom: '16px' }}>
            <p style={{ margin: 0 }}>这是关于"{content.title}"的详细内容...</p>
            <p style={{ margin: '8px 0 0 0' }}>这里可以展示具体的技术指导、市场分析或政策解读等内容。</p>
          </div>
          
          <div style={{ display: 'flex', gap: '16px', justifyContent: 'space-between' }}>
            <div>
              <EyeOutlined /> <span>{content.views} 浏览</span>
            </div>
            <div>
              <LikeOutlined /> <span>{content.likes} 点赞</span>
            </div>
            <div>
              <ShareAltOutlined /> <span>{content.shares} 分享</span>
            </div>
          </div>
          
          <div style={{ marginTop: '16px', padding: '12px', background: '#e6f7ff', borderRadius: '6px' }}>
            <p style={{ margin: 0, fontWeight: 'bold' }}>互动功能</p>
            <div style={{ display: 'flex', gap: '16px', marginTop: '8px' }}>
              <Button size="small" icon={<LikeOutlined />}>点赞</Button>
              <Button size="small" icon={<ShareAltOutlined />}>分享</Button>
              <Button size="small" icon={<DownloadOutlined />}>下载</Button>
            </div>
          </div>
        </div>
      ),
      width: 700
    })
  }

  // 搜索功能
  const handleSearch = (value: string) => {
    message.info(`搜索关键词: ${value}`)
    // 实际应用中这里可以调用搜索API
  }

  // 评价内容
  const handleRateContent = (content: any, rating: number) => {
    message.success(`感谢您对"${content.title}"的评价：${rating}星`)
  }



  const unreadCount = notifications.filter(notification => !notification.isRead).length

  return (
    <div style={{ minHeight: '100vh', background: 'white' }}>
      {/* 用户头部 */}
      <div style={{
        background: 'linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%)',
        padding: '30px 24px',
        color: 'white',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <div>
            <h1 style={{ margin: 0, fontSize: 28 }}>欢迎回来，{userInfo?.username || '用户'}</h1>
            <p style={{ margin: '8px 0 0 0', opacity: 0.9 }}>今天是 {new Date().toLocaleDateString()}，祝您工作愉快！</p>
          </div>
          
          <div style={{ display: 'flex', alignItems: 'center', gap: 16 }}>
            <Search 
              placeholder="搜索内容、活动、政策..." 
              onSearch={handleSearch}
              style={{ width: 300 }}
              enterButton
            />
            
            <Badge count={unreadCount} showZero>
              <Button 
                type="text" 
                icon={<BellOutlined />} 
                style={{ color: 'white' }}
                size="large"
                onClick={() => message.info('通知功能开发中')}
              >
                通知
              </Button>
            </Badge>
            
            <Button 
              onClick={handleLogout}
              style={{ 
                background: 'rgba(255,255,255,0.2)',
                borderColor: 'rgba(255,255,255,0.3)',
                color: 'white'
              }}
              size="large"
            >
              退出登录
            </Button>
          </div>
        </div>
      </div>

      {/* 用户信息卡片 */}
      <div style={{ padding: '0 24px' }}>
        <Card 
          style={{ 
            borderRadius: '12px',
            marginBottom: '24px',
            background: 'white',
            border: 'none',
            boxShadow: '0 2px 12px rgba(0,0,0,0.06)'
          }}
        >
          <div style={{ display: 'flex', alignItems: 'center', gap: '24px' }}>
            <Avatar 
              size={80} 
              icon={<UserOutlined />} 
              style={{ 
                background: 'linear-gradient(135deg, #4CAF50 0%, #8BC34A 100%)',
                fontSize: '32px'
              }}
            />
            
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px', marginBottom: '8px' }}>
                <h2 style={{ margin: 0, fontSize: '24px', color: '#333' }}>{userInfo?.username || '用户名'}</h2>
                <Tag color="green">
                  {userInfo?.isAdmin ? '管理员' : '普通用户'}
                </Tag>
              </div>
              
              <div style={{ display: 'flex', gap: '24px', flexWrap: 'wrap' }}>
                <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: '#666' }}>
                  <PhoneOutlined size={16} />
                  <span>138****1234</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: '#666' }}>
                  <HomeOutlined size={16} />
                  <span>幸福村</span>
                </div>
                <div style={{ display: 'flex', alignItems: 'center', gap: '6px', color: '#666' }}>
                  <CalendarOutlined size={16} />
                  <span>上次登录: {userInfo?.loginTime ? new Date(userInfo.loginTime).toLocaleString() : '从未登录'}</span>
                </div>
              </div>
            </div>
            
            <Button type="primary" size="large" onClick={handleCompleteProfile}>
              完善个人资料
            </Button>
          </div>
        </Card>

        {/* 用户统计信息 */}
        <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
          <Col xs={24} sm={12} md={6}>
            <Card 
              style={{ 
                borderRadius: '12px', 
                border: 'none',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                textAlign: 'center'
              }}
            >
              <Statistic 
                title="已浏览内容" 
                value={userStats.contentViewed} 
                prefix={<EyeOutlined />}
                valueStyle={{ color: '#4CAF50' }}
              />
            </Card>
          </Col>
          
          <Col xs={24} sm={12} md={6}>
            <Card 
              style={{ 
                borderRadius: '12px', 
                border: 'none',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                textAlign: 'center'
              }}
            >
              <Statistic 
                title="参加活动" 
                value={userStats.eventsAttended} 
                prefix={<CalendarOutlined />}
                valueStyle={{ color: '#2196F3' }}
              />
            </Card>
          </Col>
          
          <Col xs={24} sm={12} md={6}>
            <Card 
              style={{ 
                borderRadius: '12px', 
                border: 'none',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                textAlign: 'center'
              }}
            >
              <Statistic 
                title="完成培训" 
                value={userStats.trainingCompleted} 
                prefix={<BookOutlined />}
                valueStyle={{ color: '#FF9800' }}
              />
            </Card>
          </Col>
          
          <Col xs={24} sm={12} md={6}>
            <Card 
              style={{ 
                borderRadius: '12px', 
                border: 'none',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                textAlign: 'center'
              }}
            >
              <Statistic 
                title="积分" 
                value={userStats.points} 
                prefix={<TrophyOutlined />}
                valueStyle={{ color: '#9C27B0' }}
              />
            </Card>
          </Col>
        </Row>

        {/* 快捷服务卡片 */}
        <Row gutter={[16, 16]} style={{ marginBottom: '24px' }}>
          {quickServices.map((service, index) => (
            <Col xs={24} sm={12} md={8} key={index}>
              <Card 
                hoverable 
                style={{ 
                  borderRadius: '12px', 
                  border: 'none',
                  boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                  transition: 'all 0.3s',
                  background: service.completed ? '#f6ffed' : '#fff7e6'
                }}
                actions={[
                  <Button 
                    type="text" 
                    key="1" 
                    onClick={() => handleServiceClick(service.name)}
                    icon={service.completed ? <CheckCircleOutlined /> : <ExclamationCircleOutlined />}
                  >
                    {service.completed ? '已使用' : '开始使用'}
                  </Button>
                ]}
              >
                <div style={{ textAlign: 'center', padding: '24px 0' }}>
                  <div style={{ 
                    fontSize: '48px', 
                    color: service.completed ? '#52c41a' : '#fa8c16', 
                    marginBottom: '16px' 
                  }}>
                    {service.icon}
                  </div>
                  <h3 style={{ margin: '0 0 8px 0', fontSize: '18px', color: '#333' }}>{service.name}</h3>
                  <p style={{ margin: 0, color: '#666' }}>{service.description}</p>
                </div>
              </Card>
            </Col>
          ))}
        </Row>

        {/* 最新内容和通知 */}
        <Row gutter={[24, 24]}>
          {/* 最新内容 */}
          <Col xs={24} lg={16}>
            <Card 
              title="最新资讯" 
              style={{ 
                borderRadius: '12px', 
                border: 'none',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)' 
              }}
              extra={
                <div style={{ display: 'flex', gap: '8px' }}>
                  <Button type="link" onClick={() => navigate('/content-center')}>查看更多</Button>
                  <Button type="link" onClick={() => message.info('刷新成功')}>刷新</Button>
                </div>
              }
            >
              <List
                loading={loading}
                dataSource={latestContent}
                renderItem={item => (
                  <List.Item 
                    style={{ padding: '16px 0', borderBottom: '1px solid #f0f0f0' }}
                    actions={[
                      <Button 
                        type="text" 
                        key="view" 
                        onClick={() => handleViewContent(item)}
                        icon={<EyeOutlined />}
                      >
                        查看
                      </Button>,
                      <Rate 
                        key="rate" 
                        count={5} 
                        defaultValue={Math.floor(Math.random() * 3) + 3}
                        onChange={(value) => handleRateContent(item, value)}
                        style={{ fontSize: '14px' }}
                      />
                    ]}
                  >
                    <List.Item.Meta
                      title={
                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                          <Tag color={
                            item.type === 'article' ? 'blue' :
                            item.type === 'video' ? 'red' :
                            item.type === 'audio' ? 'orange' : 'green'
                          }>
                            {item.type === 'article' ? '文章' :
                             item.type === 'video' ? '视频' :
                             item.type === 'audio' ? '音频' : '图片'}
                          </Tag>
                          <span style={{ fontWeight: 500, cursor: 'pointer' }} onClick={() => handleViewContent(item)}>
                            {item.title}
                          </span>
                        </div>
                      }
                      description={
                        <div>
                          <div>作者：{item.author}</div>
                          <div style={{ display: 'flex', gap: '16px', fontSize: '12px', color: '#999', marginTop: '4px' }}>
                            <span>发布时间：{item.createTime}</span>
                            <span><EyeOutlined /> {item.views}</span>
                            <span><LikeOutlined /> {item.likes}</span>
                            <span><ShareAltOutlined /> {item.shares}</span>
                          </div>
                        </div>
                      }
                    />
                  </List.Item>
                )}
              />
            </Card>

            {/* 即将到来的活动 */}
            <Card 
              title="即将到来的活动" 
              style={{ 
                borderRadius: '12px', 
                border: 'none',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                marginTop: '24px' 
              }}
              extra={
                <div style={{ display: 'flex', gap: '8px' }}>
                  <Button type="link" onClick={() => message.info('查看全部活动')}>查看全部</Button>
                  <Button type="link" onClick={() => message.info('活动日历')}>日历</Button>
                </div>
              }
            >
              <List
                loading={loading}
                dataSource={upcomingEvents}
                renderItem={item => (
                  <List.Item 
                    style={{ padding: '16px 0', borderBottom: '1px solid #f0f0f0' }}
                    actions={[
                      <Button type="text" key="detail" onClick={() => handleViewEvent(item)}>详情</Button>
                    ]}
                  >
                    <List.Item.Meta
                      title={
                        <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
                          <CalendarOutlined style={{ color: '#FF9800' }} />
                          <span style={{ fontWeight: 500 }}>{item.title}</span>
                          <Tag color={
                            item.type === 'training' ? 'blue' :
                            item.type === 'festival' ? 'green' : 'orange'
                          }>
                            {item.type === 'training' ? '培训' :
                             item.type === 'festival' ? '节日' : '其他'}
                          </Tag>
                        </div>
                      }
                      description={
                        <div style={{ display: 'flex', gap: '16px', fontSize: '14px', color: '#666' }}>
                          <span>时间：{item.date} {item.time}</span>
                          <span>地点：{item.location}</span>
                          <span>参与：{item.participants}/{item.maxParticipants}</span>
                        </div>
                      }
                    />
                    <div style={{ display: 'flex', gap: '8px' }}>
                      <Button type="primary" size="small" onClick={() => handleJoinEvent(item)}>
                        我要参加
                      </Button>
                      <Button size="small" onClick={() => message.info('已添加到日历')}>
                        提醒我
                      </Button>
                    </div>
                  </List.Item>
                )}
              />
            </Card>
          </Col>

          {/* 通知列表 */}
          <Col xs={24} lg={8}>
            <Card 
              title={
                <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                  <span>我的通知</span>
                  {unreadCount > 0 && (
                    <Badge count={unreadCount} style={{ backgroundColor: '#ff4d4f' }} />
                  )}
                </div>
              }
              style={{ 
                borderRadius: '12px', 
                border: 'none',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)' 
              }}
              extra={
                <div style={{ display: 'flex', gap: '8px' }}>
                  <Button type="link" size="small" onClick={handleMarkAllAsRead}>全部标为已读</Button>
                  <Button type="link" size="small" onClick={() => message.info('通知设置')}>设置</Button>
                </div>
              }
            >
              <List
                loading={loading}
                dataSource={notifications}
                renderItem={item => (
                  <List.Item 
                    style={{
                      padding: '12px 0', 
                      borderBottom: '1px solid #f0f0f0',
                      backgroundColor: item.isRead ? 'transparent' : 'rgba(0,128,0,0.05)',
                      cursor: 'pointer'
                    }}
                    onClick={() => handleViewNotification(item)}
                  >
                    <List.Item.Meta
                      title={
                        <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                          <span style={{
                            fontWeight: 500,
                            color: item.isRead ? '#333' : '#4CAF50'
                          }}>
                            {item.title}
                          </span>
                          {!item.isRead && (
                            <div style={{ width: '8px', height: '8px', borderRadius: '50%', background: '#4CAF50' }} />
                          )}
                        </div>
                      }
                      description={
                        <div>
                          <div style={{ marginBottom: '4px', lineHeight: 1.5 }}>{item.content}</div>
                          <div style={{ fontSize: '12px', color: '#999' }}>{item.time}</div>
                        </div>
                      }
                    />
                  </List.Item>
                )}
              />
            </Card>

            {/* 常用服务 */}
            <Card 
              title="常用服务" 
              style={{ 
                borderRadius: '12px', 
                border: 'none',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                marginTop: '24px' 
              }}
            >
              <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '12px' }}>
                {quickServices.map((service, index) => (
                  <Button
                    key={index}
                    style={{
                      height: '80px',
                      display: 'flex',
                      flexDirection: 'column',
                      alignItems: 'center',
                      justifyContent: 'center',
                      backgroundColor: service.completed ? '#f6ffed' : '#fff7e6',
                      border: 'none',
                      borderRadius: '8px',
                      transition: 'all 0.3s'
                    }}
                    onClick={() => handleServiceClick(service.name)}
                    onMouseEnter={(e) => e.currentTarget.style.backgroundColor = service.completed ? '#e8f5e9' : '#ffe7ba'}
                    onMouseLeave={(e) => e.currentTarget.style.backgroundColor = service.completed ? '#f6ffed' : '#fff7e6'}
                  >
                    <div style={{ fontSize: '24px', color: service.completed ? '#52c41a' : '#fa8c16', marginBottom: '8px' }}>
                      {service.icon}
                    </div>
                    <span>{service.name}</span>
                  </Button>
                ))}
              </div>
            </Card>

            {/* 倒计时卡片 */}
            <Card 
              title="重要活动倒计时" 
              style={{ 
                borderRadius: '12px', 
                border: 'none',
                boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                marginTop: '24px' 
              }}
            >
              <div style={{ textAlign: 'center', padding: '16px' }}>
                <Countdown 
                  title="春季农业技术推广会" 
                  value={Date.now() + 1000 * 60 * 60 * 24 * 4} 
                  format="D 天 H 时 m 分 s 秒"
                  valueStyle={{ color: '#4CAF50', fontSize: '18px' }}
                />
                <Button type="link" style={{ marginTop: '12px' }} onClick={() => handleJoinEvent(upcomingEvents[0])}>
                  立即报名
                </Button>
              </div>
            </Card>
          </Col>
        </Row>
      </div>
    </div>
  )
}

export default UserDashboard